.recordingToast{
    position: fixed;
    left:50%;
    top: 58%;
    z-index: 2000;
    width: 13rem;
    color: #fff;
    visibility:visible;
    opacity:1;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transform: scale(1.0) translate(-50%,-50%);
    transform: scale(1.0) translate(-50%,-50%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    margin: 0;
    user-select:none;
}
.recordingToast_content{
    height: 11rem;
    border-radius: 1rem;
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-around;
    align-items: center;
    background-color: rgba(0,0,0,.6);

}
.recodingToast_foot{
    display:flex;
    justify-content:center;
    margin-top:10px;
    text-align:center;
}
.recodingToast_foot a{
    margin:0 1rem
}
.icon-record {
    background: url(/assets/img/record.svg);
    width: 90px;
    height: 90px;
    background-color: #000;
    border-radius: 100%
}
.startRecording .icon-record {
    background-image: url(/assets/img/recording.gif);
    width: 90px;
    height: 90px;
    background-color: #000;
    border-radius: 100%
}

.icon-play{
    background-image: url(/assets/img/play.svg);
    border-radius: 100%;
    width:40px;
    height:40px;
    background-color:#000
}
.playing .icon-play{
    background-image: url(/assets/img/pause.svg);
    border-radius: 100%;
    width:40px;
    height:40px;
    background-color:#000
}
.icon-confirm{
    background-image: url(/assets/img/confirm.svg);
    border-radius: 100%;
    width:40px;
    height:40px;
}
.icon-cancel{
    background-image: url(/assets/img/cancel.svg);
    border-radius: 100%;
    width:40px;
    height:40px;
    background-color:#000;
}
